Skip to content

fix(web, SafeAreaView): replace default export with named export#3956

Open
roryabraham wants to merge 1 commit intosoftware-mansion:mainfrom
roryabraham:fix/safe-area-view-web-named-export
Open

fix(web, SafeAreaView): replace default export with named export#3956
roryabraham wants to merge 1 commit intosoftware-mansion:mainfrom
roryabraham:fix/safe-area-view-web-named-export

Conversation

@roryabraham
Copy link
Copy Markdown

@roryabraham roryabraham commented Apr 29, 2026

Description

safe-area/index.ts re-exports SafeAreaView as a named export:

export { SafeAreaView } from './SafeAreaView';

For web builds, webpack resolves './SafeAreaView' to './SafeAreaView.web.tsx', which only had a default export:

const SafeAreaView = View;
export default SafeAreaView;

This causes a ModuleDependencyWarning at build time:

export 'SafeAreaView' (imported as 'SafeAreaView') was not found in './safe-area/SafeAreaView' (possible exports: default)

This also affects ScreenStackItem.tsx, which does:

import { SafeAreaView } from './safe-area/SafeAreaView';

For web builds this resolves to the .web variant, again hitting the same missing named export.

Fix

Replace the default export with a named export in SafeAreaView.web.tsx to match the native variant (SafeAreaView.tsx), which only has a named export, and the package's public surface (safe-area/index.ts), which only re-exports as named.

Test plan

  • Verified the warning no longer appears in a web/Storybook webpack build after this change

Related

Found while upgrading `react-native-screens` to `4.25.0-beta.1` in Expensify/App#89199.

@roryabraham roryabraham marked this pull request as ready for review April 29, 2026 18:06
Copy link
Copy Markdown
Member

@kkafar kkafar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, thanks for catching this & PR.

If this is an regression introduced in beta version, we can get rid of the default export entirely.

@roryabraham roryabraham force-pushed the fix/safe-area-view-web-named-export branch from cd8e4f3 to 39e08c4 Compare May 1, 2026 22:03
The safe-area/index.ts re-exports SafeAreaView as a named export:
  export { SafeAreaView } from './SafeAreaView';

For web builds, webpack resolves './SafeAreaView' to './SafeAreaView.web.tsx',
which only had a default export, causing a ModuleDependencyWarning at build
time since the named export 'SafeAreaView' could not be found.

The native variant (SafeAreaView.tsx) only has a named export, and the
package's public surface only re-exports as named, so align the web variant
to match by replacing the default export with a named export.

Co-authored-by: Cursor <[email protected]>
@roryabraham roryabraham force-pushed the fix/safe-area-view-web-named-export branch from 39e08c4 to c316bb5 Compare May 1, 2026 22:03
@roryabraham roryabraham changed the title fix(web, SafeAreaView): add named export alongside default export fix(web, SafeAreaView): replace default export with named export May 1, 2026
@roryabraham roryabraham requested a review from kkafar May 1, 2026 22:03
@roryabraham
Copy link
Copy Markdown
Author

updated

roryabraham added a commit to Expensify/App that referenced this pull request May 1, 2026
Aligns with the updated approach in the upstream PR
(software-mansion/react-native-screens#3956):
the native variant has only ever had a named export, and the package's
public surface only re-exports as named, so dropping the default on web
brings everything in line.

Co-authored-by: Cursor <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants